<template>
	<view>

		<view class="all-notes">
			<view class="all-notes-item" v-for="(item,index) in list" :key="index">
				<uni-card :cover="item.img1" :is-full="true">
					<text slot:title>{{item.title}}</text>
					<view slot:actions class="card-actions">
						<view class="card-actions-item1">
							<view class="actions-img">
								<image :src="item.img2" mode="widthFix"></image>
							</view>
							<text class="card-actions-item-text">用户</text>
						</view>
						<view class="card-actions-item" @click="boxs(index)">
							<uni-icons type="heart" v-if="item.isCollect" size="18" color="#999"></uni-icons>
							<uni-icons type="heart-filled" v-else size="18"  color="#f00"></uni-icons>
							<text class="card-actions-item-text">点赞</text>
						</view>
					</view>
				</uni-card>
			</view>
			
			<uni-load-more status="loading" iconType="auto" :showIcon="true"></uni-load-more>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:0,
						isCollect:true,
						img1:'../../../static/img/all-notes1.png',
						title:'2021六一节，携手闺蜜打卡韩国最大的岛屿-济州岛！',
						img2:'../../../static/img/all-notes1.png'
					},
					{
						id:1,
						isCollect:true,
						img1:'../../../static/img/all-notes2.png',
						title:'2021六一节，携手闺蜜打卡韩国最大的岛屿-济州岛！',
						img2:'../../../static/img/all-notes2.png'
					},
					{
						id:2,
						isCollect:true,
						img1:'../../../static/img/all-notes3.png',
						title:'2021六一节，携手闺蜜打卡韩国最大的岛屿-济州岛！',
						img2:'../../../static/img/all-notes3.png'
					},
					{
						id:3,
						isCollect:true,
						img1:'../../../static/img/all-notes4.png',
						title:'2021六一节，携手闺蜜打卡韩国最大的岛屿-济州岛！',
						img2:'../../../static/img/all-notes2.png'
					},
					{
						id:4,
						isCollect:true,
						img1:'../../../static/img/all-notes1.png',
						title:'2021六一节，携手闺蜜打卡韩国最大的岛屿-济州岛！',
						img2:'../../../static/img/all-notes1.png'
					},
					{
						id:5,
						isCollect:true,
						img1:'../../../static/img/all-notes2.png',
						title:'2021六一节，携手闺蜜打卡韩国最大的岛屿-济州岛！',
						img2:'../../../static/img/all-notes2.png'
					},
				]
			}
		},
		methods: {
		boxs(e){
			this.list[e].isCollect = !this.list[e].isCollect
		}
	
		}
	}
</script>

<style lang="scss" scoped>
	.all-notes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.all-notes-item {
		width: 50%;
		height: 750rpx;

		::v-deep .uni-card--full {
			display: flex;
			flex-direction: column;
		}

		::v-deep .uni-card__content {
			display: flex;
			flex-direction: column;
		}
	}

	.card-actions {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card-actions-item1 {
		width: 150rpx;
		display: flex;
		align-items: center;

		.actions-img {
			image {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}
</style>
